<template>
  <div
    class="scissorsBox scissorsAnd"
    @mouseenter="hoverActive = true"
    @mouseleave="hoverActive = false">
    <div
      class="scissors-position"
      :class="{hoverActive: hoverActive}">
      <i class="el-icon-scissors cut-icon" @click="clickFun"></i>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Scissors',
  props: {
    scissorsIndex: {},
    parent: {},
    scissors: {},
    panel: { type: Boolean }

  },
  data () {
    return {
      hoverActive: false,
      // 表示当前hover的是第几个节点 初始为 -1 或 null 不能为0 0表示第一个li
      hoverIndex: -1,
      // 表示当前点击的是第几个节点 初始为 -1 或 null 不能为0 0表示第一个li
      clickIndex: -1
    }
  },
  methods: {
    hoverFun (index) {
      this.hoverIndex = index
    },
    clickFun () {
      const data = {
        scissors: this.scissors,
        index: this.scissorsIndex,
        parent: this.parent
      }
      this.$emit('scissorsHandle', data)
    }
  }
}
</script>

<style scoped>
.scissorsBox {
  left: -28px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 15px;
  height: 25px;
  position: absolute;
  z-index: 1000;
}

.scissorsAnd {
  left: -7px
}

.scissorsBox .hoverActive {
  display: block
}

.scissors-position {
  display: none;
  /*left: 2px;*/
  /*top: 36%;*/
  left: -5px;
  top: 25%;
  width: 25px;
  height: 25px;
  position: absolute;
  z-index: 99
}

.cut-icon {
  color: black;
  font-size: 24px;
  font-weight: 700;
}

</style>
